<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				height: 40px;
				/* background-color: #FFC0CB; */
				margin: 0 auto;
			}
			@media screen and (max-width: 768px) {
				.container {
					width: 100%;
				}		
				.container ul li {
					width: 33.33%;
				}
			}
			@media screen and (min-width: 768px) {
				.container {
					width: 750px;
				}	
			}
			@media screen and (min-width: 992px) {
				.container {
					width: 970px;
				}	
			}
			@media screen and (min-width: 1200px) {
				.container {
					width: 1170px;
				}	
			}
			.container ul {
				list-style: none;
			}
			.container ul li {
				float: left;
				width: 121.25px;
				height: 40px;
				color: white;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<!-- 
		 响应式原理：使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的。
		 
		 超小屏幕：设置宽度100%
		 小屏幕：设置宽度750px
		 中等屏幕：设置宽度970px
		 大屏幕：设置宽度为1170px
		 
		 -->
		 <!-- 响应式开发中，首页需要一个布局容器 -->
		 <div class="container">
			 <ul>
			 	<li>首页</li>
				<li>关于</li>
				<li>详情</li>
				<li>我的</li>
				<li>购物车</li>
				<li>联系我们</li>
				<li>发表评论</li>
				<li>登录/注册</li>
			 </ul>
		 </div>
	
	</body>
</html>
